<template>
	<view class="login">
		<head-navigation :back-is-show="isPhoneLogin?1:0"  :is-back="4" @choseLogin="res => isPhoneLogin = false"></head-navigation>
		<view class="login_box">
			<view class="login_img">
				<image class="login_icon" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/fd5d41aed92f448b937bf365168cc2d4.png" mode=""></image>
				<view class="title">欢迎来到神椰 Magic CoCo</view>
				<view class="subtitle">享受更优的数字权益</view>
			</view>
			<view class="input_box" v-if="isPhoneLogin || isH5Login">
				<view class="input_box_li">
					<input class='input_box_number' type="number" value="" placeholder="请输入手机号" maxlength="11" v-model="phone"
						placeholder-class="placeholder_class" />
					<view class="cleanUp" v-if="phone != ''"  @click=" res => phone = ''">
						<uni-icons type="closeempty" size="38rpx" color="#ACAEB9"></uni-icons>
					</view>
				</view>
				<view class="input_box_li" >
					<input class='input_box_code' type="text" maxlength="6" value="" placeholder="请输入验证码" v-model="smscode"
						placeholder-class="placeholder_class" />
					<view class="cleanUp" v-if="smscode != ''" @click="res => smscode = ''">
						<uni-icons type="closeempty" size="38rpx" color="#ACAEB9" ></uni-icons>
					</view>
					<verification-code :seconds="seconds" ref="verCode" @openAgreeWith='openAgreeWith' @start="start" @end="end" :phone="phone" v-model="status" >
					</verification-code>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
				<view class="wx_click_login" v-if="!isPhoneLogin">
					<button open-type="getPhoneNumber" @getphonenumber="wxLogin" plain="true" v-if="isPrivacy&&status">一键登录</button>
					<button hover-class="none" @click="$noMultipleClicks(wxLogin)" v-else>一键登录</button>
				</view>
			<!-- #endif -->
			<view class="gou" @click="gouFunc">
				<view class="image-box" >
					<image :src="status?'/static/login/gou.png':'/static/login/gou_no.png'" mode=""></image>
				</view>
				<text>我已阅读并同意<text @click.stop="jumptext(2)">《神椰隐私保护协议》</text>和<text @click.stop="jumptext(1)">《神椰用户服务协议》</text></text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
				<view class="wx_login_word" v-if="!isPhoneLogin">
					<view class="word_01" @click="jumpIndex">暂不登录</view>
					<view class="word_02"></view>
					<view class="word_03" @click="res => isPhoneLogin = true">手机验证码登录</view>
				</view>
				<view class="wx_login_word" v-else>
					<view class="button_zb" @click="jumpIndex">
						<text>暂不登录</text>
						<uni-icons type="right" color="#5C5C5C" size="30rpx"></uni-icons>
					</view>
				</view>
			<!-- #endif -->
			
			<view class="button_box" v-if="isPhoneLogin || isH5Login">
				<view class="button_name" v-if="status && phone != '' && smscode != '' " @click="realName">登录</view>
				<view class="button_name button_name_no" v-else @click="effective" style="width: 100%;">登录</view>
				<!-- #ifdef H5 -->
					<view class="button_zb" @click="jumpIndex">
						<text>暂不登录</text>
						<uni-icons type="right" color="#5C5C5C" size="30rpx"></uni-icons>
					</view>
					<view class="wx_login">
						<view class="wx_login_box" @click="wxLogin">
							<image src="/static/login/wx_icon.png" mode="" ></image>
							<text>微信登录</text>
						</view>
					</view>
				<!-- #endif -->
			</view>
		</view>
		<uni-popup ref="propDialog" type="center" mask-background-color="rgba(0,0,0,0.6)">
			<view class="prop_box">
				<view class="prop_title">服务协议及隐私政策</view>
				<view class="prop_content">在您注册/登录神椰账号的过程中，您需要阅读并同意《神椰隐私保护协议》和《神椰用户服务协议》。请务必仔细阅读，充分理解条款内容后再同意。</view>
				<view class="prop_line"></view>
				<view class="prop_agreement">
					<text class="agreement_text">点击同意即表示您已阅读并同意</text>
					<text class="agreement_word" @click="jumptext(2)">《神椰隐私保护协议》</text>
					<text class="agreement_text">和</text>
					<text class="agreement_word" @click="jumptext(1)">《神椰用户服务协议》</text>
				</view>
				<view class="prop_b">
					<view class="prop_txt" @click="disagree">不同意</view>
					<!-- #ifdef MP-WEIXIN -->
						<view class="prop_txt prop_txt2" @click="agreeWith" v-if="isPhoneLogin || isH5Login">同意</view>
						<button class="prop_txt prop_txt2" open-type="getPhoneNumber" @getphonenumber="agreeWith" plain="true" v-else>同意</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					   <view class="prop_txt prop_txt2" @click="agreeWith" >同意</view>
					<!-- #endif -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		wealthInfo
	} from '@/api/wallet.js'
	const app = getApp()
	export default {
		data() {
			return {
				mainImageUrl: this.mainImageUrl,
				msg: '获取验证码',
				smscode: '',
				code:'',
				phone: '',
				blindboxStatus:false, //判断是否是盲盒登录
				seconds: 60, //倒计时时间
				linkJump:'',
				clickStatus:1, //1 直接点击弹出协议框 2点击验证码弹出协议框
				isPrivacy:false, //是否授权隐私协议
				status: false, //是否勾选
				noClick:true,//防重复登录
				isPhoneLogin:false, //是否是手机号码登录
				isH5Login:false, //是否是h5登录
			}
		},
		onLoad(e) {
			// #ifdef H5
				this.isH5Login = true
			// #endif
			if(e.blindboxStatus != undefined){
				this.$queue.setData('blindboxStatus',true)
			}
			if(e.linkJump != undefined){
				this.linkJump = e.linkJump
			}
			// #ifdef MP-WEIXIN
			this.getWxPrivacy()
			// #endif
			// console.log(this.code)
			// else {
			// 	this.code = e.code
			// }
		},
		onShow() {
			// #ifdef H5
				this.code = this.getUrlParam('code')
				var codeData = this.$queue.getData('code')
				if(uni.getStorageSync('token') != undefined && uni.getStorageSync('token') != ''){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else if (this.code == null || this.code == '' || this.code == undefined ) {
					  if(app.isEmpty(this.getUrlParam('linkCode'))){
						  app.getLogin()
					  }else{
						   app.getLogin(1)
					  }
				}else if(codeData == this.code){
					if(app.isEmpty(this.getUrlParam('linkCode'))){
						app.getLogin()
					}else{
						app.getLogin(1)
					}
				}
				else{
					if(!app.isEmpty(this.getUrlParam('linkCode')) && !app.isEmpty(this.$queue.getData('loginCode'))){
						this.status = true
						this.clickStatus = 3
						this.wxLogin()
					}
					this.$queue.setData('code',this.code)
					this.blindboxStatus = this.$queue.getData('blindboxStatus')
					setTimeout(()=>{
						uni.removeStorageSync('blindboxStatus')
					},2000)
				}
			// #endif

		 	// #ifdef MP-WEIXIN
			   this.getCode()
			 // #endif
			if(uni.getStorageSync('tel') != undefined){
				this.phone = uni.getStorageSync('tel')
			}
			// this.$nextTick(()=>{
			// 	this.$refs.propDialog.open()
			// })
			
		},
		methods: {
			// 获取code
			getCode() {
				let that = this;
				uni.login({
					success: function(res) {
						if (res.code) {
							console.log('res.code',res.code)
							that.code = res.code
						} else {
							console.log('获取code失败', res.errMsg)
						}
					}
				})
			},
			// 查询是否授权隐私协议
			getWxPrivacy() {
				wx.getPrivacySetting({
					success: res => {
						console.log(res)
						// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
						if (res.needAuthorization) {
							console.log('隐私协议未授权')
							this.isPrivacy = false
						} else {
							console.log('隐私协议已授权')
							this.isPrivacy = true
						}
					},
				})
			},
			// 打开弹窗
			openAgreeWith(e){
				// 获取验证码 未勾选
				if(e == 1){
					this.clickStatus = 2
					this.$refs.propDialog.open()
				}else if(e == 2 ){
					// 获取验证码 已勾选
					this.status = true
				}else if(e == 3 ){
					// 微信登录
					this.clickStatus = 3
					this.$refs.propDialog.open()
				}
			},
			// 弹窗 同意
			agreeWith(e){
				this.status = true
				this.disagree()
				if(this.clickStatus == 1){
					// 已授权
					this.isPrivacy = true
				}
				else if(this.clickStatus == 2){
					// 验证码登录
					this.$refs.verCode.changeStatus(this.status)
				}else if(this.clickStatus == 3){
					// 微信授权登录
					this.isPrivacy = true
					this.wxLogin(e)
				}
			},
			// 不同意
			disagree(){
			  this.$refs.propDialog.close()
			},
			// 获取url code
			getUrlParam(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
				var r = window.location.search.substr(1).match(reg)
				if (r != null) return unescape(r[2])
				return null
			},
			// 效验参数
			effective() {
				if (this.phone == '') {
					this.$queue.showToast('手机号不能为空！');
					return false;
				} else if (this.smscode == '') {
					this.$queue.showToast('验证码不能为空！');
					return false;
				} else if (!this.status) {
					this.$queue.showToast('请勾选协议');
					return false;
				}
			},
			// 倒计时 获取验证码
			async start() { 
				let phone = this.phone
				const res = await this.$api.sendCodeBtn(phone);
				this.$queue.setData('tel',this.phone)
				uni.showToast({
					icon: 'none',
					title: '发送成功,请注意查看短信'
				})
			},
		   // 获取钱包信息
			getWealthInfo(){
				wealthInfo().then(wInfo=>{
					var customer = wInfo.result
					this.$queue.setData('walletYF',customer.yf)
					this.$queue.setData('walletCoCo',customer.coco)
				})
			},
			async realName() {
				var data = {
					phone: this.phone,
					code: this.smscode,
					wxCode:this.code,
					source:1,
					type: 3, //1 h5   3小程序
				}
				// #ifdef H5
				  data.type = 1
				// #endif
				uni.showLoading({
					title: '登录中'
				})
				
				try {
					const res = await this.$api.login(data);
					this.$queue.setData('token', res.result.token)
					this.$queue.setData('isRealName', res.result.isRealName)
					uni.removeStorageSync("loginSendTime")
					this.$queue.showToast('登录成功')
					this.getWealthInfo()
					// 判断是否有链接转跳
					if(this.linkJump != '' && this.linkJump != undefined){
						setTimeout(() => {
							// var curRoute = JSON.parse(decodeURIComponent(uni.getStorageSync('linkJump')))
							// // 防止微信静默 登录url 出错
							// if(curRoute.indexOf('/pages/login/login') > -1){
							// 	curRoute = '/pages/index/index'
							// }
							// // 页面跳转时 传参(过长) JSON.parse(decodeURIComponent(this.linkJump))
							// uni.reLaunch({
							// 	// url: JSON.parse(decodeURIComponent(this.linkJump))
							// 	url: curRoute
							// })
							this.jumpToPage()
						}, 800)
					}else{ 
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 800)
					}
				} catch {
					
				} finally {
					
				}

			},
			end() {
				console.log('结束')
			},
			gouFunc() {
				// this.clickStatus = 1
				// if(this.status){
				// 	this.status = false
				// }else{
					
				// }
				console.log('this.isPrivacy',this.isPrivacy)
				if (!this.isPrivacy) { //未授权情况
				    this.clickStatus = 1
					this.$refs.propDialog.open()
				} else {
					this.status = !this.status
				}
				// this.status = !this.status
			},
			jumptext(e){ //1:隐私协议，2：服务协议
			    this.disagree()
				uni.navigateTo({
					url:'text-box?type=' + e
				})
			},
			jumpIndex(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			// 微信登录
		 	wxLogin(e){
				if (!this.isPrivacy || !this.status) {
					this.openAgreeWith(3)
					return
				}
				// if (!this.status) {
				// 	this.openAgreeWith(3)
				// 	return false;
				// }
				// #ifdef H5
					this.hangleH5Login()
				// #endif
				// #ifdef MP-WEIXIN
				    this.hangleWxLogin(e)
				// #endif
			},
			// H5授权登录
			async hangleH5Login(){
				var data = {
					type: 3, //1 h5   3小程序
					code: this.code,
				}
				// #ifdef H5
				  data.type = 1
				// #endif
				uni.showLoading()
				try{
					var res = await this.$api.customerLoginWx(data)
				    var result = res.result
					if(result.token != ''){
						this.$queue.showToast('登录成功')
					}else{
						this.$queue.showToast('未绑定微信号')
					}
					// this.getWealthInfo()
					setTimeout(()=>{
						if(result.token != ''){
							this.$queue.setData('token', result.token)
							this.getWealthInfo()
							if(this.linkJump != '' && this.linkJump != undefined){
								this.jumpToPage() //跳转新页面
							}else{ 
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 800)
							}
						}else{
							var linkJump = 1
							if(this.linkJump != ''){
								linkJump = 2
							}
							this.$queue.setData('wxData',result.data)
							uni.navigateTo({
								// url:'/pages/login/bindPhone?wxData='+result.data+'&linkJump='+linkJump
								url:'/pages/login/bindPhone/bindPhone?linkJump='+linkJump
							})
						}
					},800)
				
				}catch(e){
					// uni.removeStorageSync("loginCode")
					// app.getLogin(1)
					//TODO handle the exception
				}
			},
			//微信授权登录
			hangleWxLogin(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					let dataOne = {
						code: this.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}
					this.$api.appLoginWxMina(dataOne).then(res => {
						var result = res.result
						this.$queue.showToast('登录成功')
						this.$queue.setData('token', result.token)
						this.getWealthInfo()
						setTimeout(()=>{
							if(this.linkJump != '' && this.linkJump != undefined){
								this.jumpToPage() //跳转新页面
							}else{ 
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						},800)
					},error=>{
						this.getCode()
					})
			
				} else if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					//ios拒绝授权 
					this.getCode()
				} else if (e.detail.errMsg == 'getPhoneNumber:fail:user deny') {
					//安卓拒绝授权    
					this.getCode()
				}
			},
			// 跳转页面
			jumpToPage(){
				var curRoute = JSON.parse(decodeURIComponent(uni.getStorageSync('linkJump')))
				// 防止微信静默 登录url 出错
				if(curRoute.indexOf('/pages/login/login') > -1){
					curRoute = app.globalData.homePage
					uni.reLaunch({
						url: curRoute
					})
				}else if(app.globalData.tabBarList.findIndex(obj => curRoute.indexOf(obj) > -1) > -1){
					uni.reLaunch({
						url: curRoute
					})
				}else{
					uni.navigateTo({
						url: curRoute
					})
				}
			}
		}
	}
</script>

<style scoped>

	.login {
		width: 750rpx;
		min-height: 100vh;
		background: #D9D9D9 url("https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/ea975bb376c944ada450874918c0ef97.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		/* #ifdef H5 */
		  padding-top: 62rpx;
		/* #endif */
	}

	.login_box {
		width: 750rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		/* #ifdef MP-WEIXIN */
		  /* margin-top: 160rpx; */
		  margin-top: 70rpx;
		/* #endif */
	}
	.login_img{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.login_icon_box{
		background: #fff;
		width: 228rpx;
		height: 230rpx;
		overflow: hidden;
		
	}
	.login_icon {
		border-radius: 34rpx;
		width: 228rpx;
		height: 230rpx;
		box-shadow: 0rpx 8rpx 18rpx 0rpx #FECFD0;
	}
	.login_name{
		width: 156rpx;
		height: 94rpx;
		margin-top: 12rpx;
	}

	.login_box .title {
		margin-top: 80rpx;
		font-weight: 400;
		font-size: 36rpx;
		line-height: 50rpx;
		color: #373950;
	}

	.login_box .subtitle {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.input_box {}

	.input_box .input_box_li {
		width: 100%;
		padding-left:38rpx;
		box-sizing: border-box;
		height: 100rpx;
		margin-top: 40rpx;
		/* border-bottom: 2rpx solid #D9D9D9; */
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 18rpx 0rpx #FECFD0;
		border-radius: 200rpx;
	}
	.input_box .input_box_li .input_box_number{
		width:100%;
		height:100%;
	}
	.input_box .input_box_li .input_box_code {
		flex: 1;
		height: 100%;
	}
	.input_box .input_box_li:nth-child(2){
		padding-right: 38rpx;
	}
	.input_box .input_box_li:nth-child(2) .cleanUp{
		width:100rpx;
	}
	.cleanUp{
		width:150rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* margin-left: 20rpx; */
	}
	 .input_box_li /deep/ .placeholder_class {
		font-weight: 400;
		font-size: 34rpx;
		line-height: 100rpx;
		color: #ACAEB9;
	}

	.gou {
		font-size: 22rpx;
		color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}

	.image-box {
		width: 24rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.gou image {
		width: 24rpx;
		height: 24rpx;
		/* margin-top: 4rpx; */
	}

	/* 登录按钮 */
	.button_box {
		margin-top: 80rpx;
	}

	.button_name {
		width: 100%;
		height: 100rpx;
		margin: 0 auto;
		background: rgba(255, 37, 33, 1);
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		margin-top: 36rpx;
		border-radius: 400rpx;
	}
	
	.button_name_no {
		opacity: .5;
	}

	/* 弹窗 */
	.prop_box {
		width:650rpx;
		border-radius: 24rpx;
		background-color: #fff;
		padding-bottom: 50rpx;
	}
	.prop_title{
		font-size: 32rpx;
		font-weight: 600;
		line-height: 44rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		padding: 40rpx 0;
	}
	.prop_content{
		font-size: 30rpx;
		font-weight: 400;
		line-height: 52rpx;
		letter-spacing: 0em;
		padding: 0 38rpx;
	}
	.prop_line{
		width: 610rpx;
		border-bottom: 2rpx solid #EBEBEB;
		margin: 24rpx auto;
	}
	.prop_agreement{
		padding: 0 38rpx;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 52rpx;
		color: #222222;
	}
	.agreement_word{
		color: #FF0F00;
	}
	.prop_b {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		margin-top: 40rpx;
	}
	
	.prop_txt {
		width: 220rpx;
		height: 70rpx;
		color: #222222;
		background: #F2F2F2;
		font-size: 32rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 4rpx;
	}
/* 	.prop_b button{
		width: 220rpx;
		height: 70rpx;
		color: #222222;
		background: #F2F2F2;
		font-size: 32rpx;
		text-align: center;
		line-height: 70rpx;
		border-radius: 4rpx;
		border: none;
	} */
	.prop_txt2 {
		margin: 0;
		border: none;
		margin-left: 74rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #FF2521 0%, #FF4743 98.24%);
	}
	/* end */
	.button_zb{
		color:#5C5C5C;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 42rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	/* 微信登录 Star*/
		.wx_login{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
		}
		.wx_login image{
			width: 72rpx;
			height: 72rpx;
		}
		.wx_login text{
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
		}
		.wx_login_box{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.wx_login_box button {
			margin: 0;
			width: auto;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			background-color: unset;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: none;
		}
		.wx_login_box button::after {
			border: none;
		}
	/* 微信登录 end*/
	
	/* 微信一键的登录 */
	.wx_click_login{
		margin-top: 120rpx;
	}
	.wx_click_login button{
		border: none;
		width: 100%;
		height: 100rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #FF2521 0%, #FF4743 100%);
		border-radius: 16rpx;
		font-size: 40rpx;
		color: #fff;
		line-height: 100rpx;
		border-radius: 200rpx;
	}
	.wx_login_word{
		position: fixed;
		left: 0;
		bottom: 110rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 30rpx;
		align-items: center;
		color: #333333;
	}
	.word_02{
		height: 26rpx;
		border-right: 2rpx solid #C2959C;
		margin: 0 60rpx;
	}
	/* end */
</style>
